/* Copyright 2022 The LUCI Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*
 * You can use this file to write your overriding general CSS,
 * if you prefer SASS, you can simply rename the file extension to `.scss` as the SASS plugin is already included.
 */

@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";

body {
  box-sizing: border-box;
  min-width: 300px;
  padding: 0;
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: var(--font-size-default);
  line-height: 1.4;
  color: var(--default-text-color);
  letter-spacing: 0.25px;
  background-color: rgb(249 250 251);
}

html {
  /* These colors are from MILO */
  --default-text-color: #212121;
  --light-text-color: #636363;
  --greyed-out-text-color: #808080;
  --active-text-color: #1976d2;
  --exonerated-color: #0084ff;
  --success-color: #169c16;
  --failure-color: #d23a2d;
  --warning-text-color: #f90;
  --warning-color: #ffae00;
  --scheduled-color: #73808c;
  --started-color: #ff8000;
  --critical-failure-color: #6c40bf;
  --canceled-color: var(--exonerated-color);
  --scheduled-bg-color: #b7c1c9;
  --started-bg-color: #ffd1a2;
  --success-bg-color: #97ddbb;
  --failure-bg-color: #ffc9c5;
  --critical-failure-bg-color: #dfceff;
  --canceled-bg-color: #c5ecff;
  --block-background-color: #f5f5f5;
  --dark-background-color: #555;
  --highlight-background-color: var(--warning-color);
  --divider-color: #ddd;
  --active-color: #007bff;
  --light-active-color: #d9edfc;
  --delete-color: var(--failure-color);
  --mdc-theme-primary: var(--active-color);
  /* These colors are from LUCI Bisection */
  --suspect-found-color: #5468ce;
}

.data-placeholder {
  color: var(--greyed-out-text-color);
}

.span-link + .span-link {
  padding-left: 2rem;
}
